<template>
  <div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="hash.carno" label="牌照"></el-table-column>
      <el-table-column prop="hash.servername" label="车务类型"></el-table-column>
      <el-table-column prop="hash.carserverno" label="车务编号"></el-table-column>
      <el-table-column prop="hash.servertime" label="办理日期"></el-table-column>
      <el-table-column prop="hash.nexttime" label="下次办理日期"></el-table-column>
      <el-table-column prop="hash.shop" label="商户"></el-table-column>
      <el-table-column prop="hash.serveramount" label="费用"></el-table-column>
      <el-table-column prop="hash.carholdername" label="办理人"></el-table-column>

      <el-table-column prop="hash.remark" label="备注"></el-table-column>
      <el-table-column label="附件">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="checkfilink(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :currentPage.sync="pagobj.currentPage3"
      :pageSize="pagobj.pagesize"
      layout="total, prev, pager, next"
      :total="pagobj.total"
      style="margin:20px 0;text-align:center"
    ></el-pagination>
    <el-dialog title="附件信息" :visible.sync="dialogVisible" width="40%">
      <el-form labelWidth="150px">
        <el-table :data="flinklist" stripe style="width: 100%">
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column prop="hash.filename" label="附件名"></el-table-column>
          <el-table-column label="附件">
            <template slot-scope="scope">
              <el-button size="mini" type="primary">
                <a :href="scope.row.hash.fileurl" download target="_Blank" style="color:#fff">下 载</a>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item>
          <div>&nbsp;</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="dialogVisible = false">返 回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      dialogVisible: false,
      flinklist: [], // 拿到的附件数据
    };
  },
  props: {
    tableData: Array,
    pagobj: {
      type: Object,
      required: true,
    },
  },
  methods: {
    // 查看
    checkfilink(item) {
      // console.log(item, "00000");
      const req = {
        handle: '0E56125B90D2898ACAD2C3968249185CCD3A43E9777C4E90',
        filetype: 'carserver',
        mainid: item.hash.carserverno,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          this.flinklist = ts.d.data.operation1;
          // console.log(ts.d.data, "0909");
          this.dialogVisible = true;
        }
      });
    },
    handleCurrentChange() {
      this.$parent.getservicelist();
    },
    handleSelectionChange(val) {
      // console.log(val, "888");
      this.$emit('update:itemval1', val);
      if (val.length > 0) {
        const req = {
          handle:
          '0E56125B90D2898A610E7AD0194EDF3B76B2BF1A5FC765CE947C61655EDF54FA',
          carserverno: val[0].hash.carserverno,
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          if (ts.d.sflag == 'success') {
          // let a = [];
          // a = ts.d.data.operation1;
            this.$emit('update:itemvals', ts.d.data.operation1);
          // this.branchidlist=ts.d.data.operation1[0],
          // console.log(this.branchidlist.hash.holder,'999');
          // console.log(this.flinklist, "0909");
          }
        });
      }
      // console.log(itemvals,'2');
      // this.$emit("update:itemvals", val);
    },
  },
};
</script>

<style>
.cell {
  text-align: center;
}
.el-dialog__footer{
  padding:20px 20px 80px;
}
</style>
